<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>Title</title>
        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
        <script>

            $(function(){

                $("li").mouseover(function(){
                    <%--$.ajax("${pageContext.request.contextPath}/show",{--%>
                        <%--data:{"id":$(this).prop("id")},--%>
                        <%--success:function(user){--%>
                            <%--$("#id").text(user.id);--%>
                            <%--$("#username").text(user.username);--%>
                            <%--$("#password").text(user.password);--%>
                            <%--$("#phone").text(user.phone);--%>
                            <%--$("#address").text(user.address);--%>
                        <%--}--%>
                    <%--});--%>



                    $.getJSON("${pageContext.request.contextPath}/show",
                              {"id":$(this).prop("id")},
                              function(user){
                                  $("#id").text(user.id);
                                  $("#username").text(user.username);
                                  $("#password").text(user.password);
                                  $("#phone").text(user.phone);
                                  $("#address").text(user.address);
                              });







                });

            });


        </script>
    </head>
    <body>
        <c:forEach items="${users}" var="user">
            <li id="${user.id}">${user.username}</li>
        </c:forEach>

        <hr/>

        <div id="data">
            编号：<span id="id"></span><br/>
            姓名：<span id="username"></span><br/>
            密码：<span id="password"></span><br/>
            电话：<span id="phone"></span><br/>
            地址：<span id="address"></span><br/>
        </div>
    </body>
</html>
